<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" style="height: 100%; width: 100%">
      <el-tab-pane label="图表" name="first">
        <div style="display: flex">
          <div ref="newXzEcharts" style="width: 35%; height: 400px"></div>
          <div ref="btCityEcharts" style="width: 35%; height: 400px"></div>
          <div ref="btGradeEcharts" style="width: 35%; height: 400px"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表" name="second">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="88px"
        >
          <el-form-item label="园所名称：" prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入园所名称"
              @input="handleInput"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- <el-form-item label="区域：" prop="title">
          <el-select v-model="queryParams.area" clearable placeholder="请选择区域"
           >
            <el-option v-for="item in queryRoomList" :key="item.id" :label="item.title" :value="item.id" size="small">
            </el-option>
          </el-select>
        </el-form-item> -->
          <!-- <el-form-item label="地区类型：" prop="area">
          <el-select v-model="queryParams.area" clearable placeholder="请选择地区"
           >
            <el-option v-for="item in queryRoomList" :key="item.id" :label="item.title" :value="item.id" size="small">
            </el-option>
          </el-select>
        </el-form-item> -->
          <el-form-item label="园所性质：" prop="type">
            <el-select
              v-model="queryParams.type"
              placeholder="请选择园所性质"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in schoolTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="地区类型：" prop="nature">
            <el-select
              v-model="queryParams.nature"
              placeholder="请选择地区类型"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in schoolNatureOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="地区筛选：" prop="nature">
            <el-select
              v-model="schoolValue"
              placeholder="请选择地区筛选"
              size="small"
            >
              <el-option
                v-for="dict in schoolOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="园所等级：" prop="level">
            <el-select
              v-model="queryParams.level"
              placeholder="请选择园所等级"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in leveltypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="studentCheckList">
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column
            type="index"
            label="序号"
            align="center"
            :index="customeIndex"
            width="80"
          ></el-table-column>
          <el-table-column label="园所名称" align="center" prop="title" />
          <el-table-column
            label="园所性质"
            align="center"
            prop="type"
            :formatter="schoolTypeFormat"
          />
          <el-table-column
            label="地区类型"
            align="center"
            prop="nature"
            :formatter="schoolNatureFormat"
          />
          <!-- <el-table-column label="就读状态" align="center" prop="isFull"  /> -->
          <el-table-column
            label="园所等级"
            align="center"
            prop="level"
            :formatter="leveltypeFormat"
          />
          <!-- <el-table-column label="地区类型" align="center" prop="nowStudent"  /> -->
          <el-table-column label="园所地址" align="center" prop="address" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['student:studentCheck:edit']">修改</el-button> -->
              <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['student:studentCheck:remove']">删除</el-button> -->
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleMore(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="园所幼儿信息"
      :visible.sync="open"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="charts">
        <div ref="newEcharts" class="zzt_dom"></div>
        <div ref="btEcharts" class="bt_dom"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { schoolVolist, selectType } from "@/api/qu/ysgl";
import { getToken } from "@/utils/auth";
import { selectStudent } from "@/api/base/student";

export default {
  name: "qyyexxgailan",
  data() {
    return {
      schoolValue:1,
      school: {
        name: "张三",
        age: "5",
        sex: "男",
        class: "小二班",
        father: "张一",
        mother: "王五",
        medicalHistory: "关于病史的信息",
      },
      schoolTypeOptions: [],
      schoolNatureOptions: [],
      leveltypeOptions: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 宿舍数据
      roomList: [],
      queryRoomList: [],
      //学生数据
      studentCheckList: [],
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null, //园所名称
        area: null, //地区
        nature: null, //地区类型
        level: null, //园所等级
        type: null, //园所性质
      },
      zztchartsData: [],
      btchartsData: [],
      myChart: null,
      mybtChart: null,
      myxzChart: null, //园所性质图表
      myCityChart: null, //城区类型图表
      myGradeChart: null, //园所等级图表
      cityChartData: [], //城区类型数据
      gradeChartData: [], //园所等级数据
      activeName: "first",
      schoolOptions:[
        {
          dictValue:1,
          dictLabel:'无极县'
        }
      ]
    };
  },
  created() {
    this.getList();
    this.selectType();
    this.getDicts("park_type").then((response) => {
      this.schoolTypeOptions = response.data;
    });
    this.getDicts("school_nature").then((response) => {
      this.schoolNatureOptions = response.data;
    });
    this.getDicts("school_level").then((response) => {
      this.leveltypeOptions = response.data;
    });
  },
  mounted() {
    // this.myChart = this.$echarts.init(this.$refs.newEcharts);
    // this.chartsFun()
    this.myxzChart = this.$echarts.init(this.$refs.newXzEcharts);
    this.myCityChart = this.$echarts.init(this.$refs.btCityEcharts);
    this.myGradeChart = this.$echarts.init(this.$refs.btGradeEcharts);
  },
  methods: {
    /** 查询列表 */
    async getList() {
      this.loading = true;
      try {
        const obj = {
          title: this.queryParams.title,
          area: this.queryParams.area,
          nature: this.queryParams.nature,
          level: this.queryParams.level,
          type: this.queryParams.type,
        };
        const data = await schoolVolist(obj);
        this.studentCheckList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 序号
    customeIndex(index) {
      return (
        index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      // this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        title: null, //园所名称
        area: null, //地区
        nature: null, //地区类型
        level: null, //园所等级
        schoolType: null, //园所性质
      }),
        this.resetForm("queryForm");
      this.handleQuery();
    },
    // 园所性质字典翻译
    schoolTypeFormat(row, column) {
      return this.selectDictLabel(this.schoolTypeOptions, row.type);
    },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
    //园所等级字典翻译
    leveltypeFormat(row, column) {
      return this.selectDictLabel(this.leveltypeOptions, row.level);
    },
    handleInput(val) {
      let regtszf =
        /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g; // 特殊字符正则
      let regkg = /[ ]/g; // 空格正则
      this.queryParams.title = val.replace(regtszf, "").replace(regkg, "");
    },
    //详情
    handleMore(item) {
      this.zztchartsData = [];
      this.btchartsData = [];
      this.zztchartsData.push(
        {
          name: "在园学生",
          value: item.nowStudent,
        },
        {
          name: "毕业学生",
          value: item.graduateStudent,
        },
        {
          name: "结业学生",
          value: item.graduationStudent,
        }
      );
      this.btchartsData.push(
        {
          name: "男生比例",
          value: item.manPro,
        },
        {
          name: "女生比例",
          value: item.womanPro,
        }
      );
      this.open = true;
      this.$nextTick(() => {
        this.myChart = this.$echarts.init(this.$refs.newEcharts);
        this.mybtChart = this.$echarts.init(this.$refs.btEcharts);
        //  执行echarts方法
        this.chartsFun();
        this.btchartsFun();
      });
    },
    submitForm() {
      this.open = false;
    },
    // 柱状图
    chartsFun() {
      const option = {
        // backgroud:'#333',
        title: {
          text: "园所学生分布情况",
          //  subtext: 'Fake Data',
          left: "left",
          subtext: "单位：人",
          subtextStyle: {
            color: "#000",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              interval: 0, //显示全部下标
            },
            data: this.zztchartsData.map((item) => item.name),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        color: ["#2f89cf", "#27d08a"],
        series: [
          {
            name: "",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.zztchartsData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.myChart.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    //饼图
    btchartsFun() {
      const option = {
        title: {
          text: "在园学生比例",
          //  subtext: 'Fake Data',
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          //  orient: 'vertical',
          bottom: 10,
          left: "center",
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: this.btchartsData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 3.5 将配置参数和图表关联
      this.mybtChart.setOption(option);
      window.addEventListener("resize", this.monitorResize);
    },
    monitorResize() {
      this.mybtChart.resize();
      this.myChart.resize();
    },
    async selectType() {
      const { code, msg, data } = await selectType();
      if (code == 200) {
        const arr = [
          {
            name: "城区园",
            value: data.city,
          },
          {
            name: "乡镇园",
            value: data.towns,
          },
          {
            name: "农村园",
            value: data.village,
          },
        ];
        this.cityChartData = arr;
        const newArr = [
          {
            name: "一级",
            value: data.firstLevel,
          },
          {
            name: "二级",
            value: data.secondLevel,
          },
          {
            name: "三级",
            value: data.thirdLevel,
          },
        ];
        this.gradeChartData = newArr
        const arrNum = [data.governmentRun,data.civilianRun]
        this.chartsXzFun(arrNum);
        this.btchartsCityFun();
        this.btchartsGradeFun()
      } else {
        this.$message.error(msg);
      }
    },
    // 园所性质图表
    chartsXzFun(arr) {
      const option = {
        // backgroud:'#333',
        title: {
          text: "园所性质分布情况",
          left: "left",
          subtext: "单位：人",
          subtextStyle: {
            color: "#000",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              interval: 0, //显示全部下标
            },
            data: ["公办", "民办"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        color: ["#2f89cf", "#27d08a"],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "30%",
            emphasis: {
              focus: "series",
            },
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: arr,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.myxzChart.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    //城区类型饼图
    btchartsCityFun() {
      const option = {
        title: {
          text: "城区类型比例",
          //  subtext: 'Fake Data',
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          //  orient: 'vertical',
          bottom: 10,
          left: "center",
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: this.cityChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.myCityChart.setOption(option);
      window.addEventListener("resize", this.monitorResize);
    },
    //园所等级饼图
    btchartsGradeFun() {
      const option = {
        title: {
          text: "园所等级比例",
          //  subtext: 'Fake Data',
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          //  orient: 'vertical',
          bottom: 10,
          left: "center",
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "",
            type: "pie",
            data: this.gradeChartData,
            radius: ["40%", "55%"],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.myGradeChart.setOption(option);
      window.addEventListener("resize", this.monitorResize);
    },
  },
};
</script>
<style lang="scss" scoped>
.charts {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  width: 100%;
  height: 500px;
  // border: 1px red solid;

  .zzt_dom {
    width: 45%;
    height: 100%;
  }

  .bt_dom {
    width: 45%;
    height: 90%;
  }
}
</style>
